<template>
  <div>
    <el-dialog title="编辑角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.roleName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色编码" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.roleCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.remark"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="选择菜单" :label-width="formLabelWidth">
          <el-checkbox v-model="check" @change="handelExpand"
            >展开/关闭</el-checkbox
          >
          <el-checkbox v-model="check1" @change="handleSelectAll"
            >权限/反选</el-checkbox
          >
          <el-tree
            style="margin-left: 70px"
            :data="datalist"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            @check-change="treechange"
          >
          </el-tree>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="isShow" type="primary" @click="makeSure"
          >确 定</el-button
        >
        <el-button v-else type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/myAuth";
import accountApi from "@/api/authority/account/index";
export default {
  components: {},

  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "",
      isShow: true,
      check: false,
      check1: false,
      options: [],
      form: {
        id: "",
        isDeleted: false,
        permissionIds: [],
        remark: "",
        roleCode: "",
        roleName: "",
      },
      datalist: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },

  created() {
    accountApi.getInitMenus().then((res) => {
      console.log(res);
      this.datalist = res.data.permissionList;
    });
  },

  mounted() {},

  methods: {
    handelExpand(e) {
      console.log(e);
    },
    handleSelectAll(e) {
      console.log(e);
    },
    //   树形结构的选择
    treechange(e) {
      console.log(e);
    },
    //   保存更改
    save() {
      accountApi.updateRolePermissions(this.form).then((res) => {
        if (res.success) {
          this.$message.success("更新成功");
          this.dialogFormVisible = !this.dialogFormVisible;
          this.$emit("tofather");
        } else {
          this.$message.error("更新失败");
        }
      });
    },
    //   新增用户
    makeSure() {
      accountApi.saveRolePermissions(this.form).then((res) => {
        if (res.success) {
          this.$message.success("新增成功");
          this.dialogFormVisible = !this.dialogFormVisible;
          this.$emit("tofather");
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    //
    change(id) {
      this.dialogFormVisible = !this.dialogFormVisible;
      console.log(id);

      if (id) {
        this.isShow = false;
        accountApi.roleinfo(id).then((res) => {
          console.log(res);
          this.form = res.data.role;
        });
      } else {
        this.isShow = true;
        this.form = {
          permissionIds: [],
          remark: "",
          roleCode: "",
          roleName: "",
        };
      }
    },
  },

  computed: {
    headers() {
      const token = getToken();
      return { token };
    },
  },

  watch: {},
};
</script>

<style scoped lang='scss'>
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
</style>